<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-nav-bar
      title="订单列表"
      left-text="返回"
      left-arrow
      @click-left="router.push('/my')"
    />
    <van-tabs v-model:active="active" @click="clickTabs">
      <van-tab title="待付款">
        <div
          @click="payNow(order)"
          v-for="(order, index) in orders.records"
          :key="index"
        >
          <div class="order-list">
            <van-card
              v-for="(item, index) in order.orderItemDtos"
              :num="item.prodCount"
              :price="item.price"
              :desc="item.skuName"
              :title="item.prodName"
              :thumb="item.pic"
              :key="index"
            />
          </div>
          <van-cell
            center
            title="订单号"
            :value="order.orderNumber"
            :label="'￥' + order.actualTotal"
          />
        </div>
      </van-tab>
      <van-tab title="待发货">
        <div v-for="(order, index) in orders.records" :key="index">
          <div class="order-list">
            <van-card
              v-for="(item, index) in order.orderItemDtos"
              :num="item.prodCount"
              :price="item.price"
              :desc="item.skuName"
              :title="item.prodName"
              :thumb="item.pic"
              :key="index"
            />
          </div>
          <van-cell
            center
            title="订单号"
            :value="order.orderNumber"
            :label="'￥' + order.actualTotal"
          />
        </div>
      </van-tab>
      <van-tab title="待收货">
        <div v-for="(order, index) in orders.records" :key="index">
          <div class="order-list">
            <van-card
              v-for="(item, index) in order.orderItemDtos"
              :num="item.prodCount"
              :price="item.price"
              :desc="item.skuName"
              :title="item.prodName"
              :thumb="item.pic"
              :key="index"
            />
          </div>
          <van-cell
            center
            title="订单号"
            :value="order.orderNumber"
            :label="'￥' + order.actualTotal"
          />
        </div>
      </van-tab>
      <van-tab title="待评价">
        <div v-for="(order, index) in orders.records" :key="index">
          <div class="order-list">
            <van-card
              v-for="(item, index) in order.orderItemDtos"
              :num="item.prodCount"
              :price="item.price"
              :desc="item.skuName"
              :title="item.prodName"
              :thumb="item.pic"
              :key="index"
            />
          </div>
          <van-cell
            center
            title="订单号"
            :value="order.orderNumber"
            :label="'￥' + order.actualTotal"
          />
        </div>
      </van-tab>
    </van-tabs>
  </van-list>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { myOrder } from "@/api/user";
import { payment } from "../api/pay";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import "vant/es/dialog/style";
let loading = ref(false);
let active = ref(0);
let finished = ref(false);
let router = useRouter();
let orders = reactive({
  records: [],
});
let fatch = reactive({
  current: 1,
  status: 1,
});
onMounted(() => {
  loadData();
});
async function loadData() {
  fatch.status = active.value + 1;
  const result = await myOrder(fatch);
  if (result.records.length > 0) {
    orders.records = [...result.records];
  }
  if (result.current >= result.pages) {
    finished.value = true;
  }
  loading.value = false;
}
async function payNow(order) {
  const payRes = await payment({
    orderNumbers: order.orderNumber,
    payType: 1,
  });
  showDialog({
    title: "支付成功",
    message: "恭喜您支付已完成! ",
  }).then(() => {
    loadData();
  });
}
function onLoad() {
  console.log("触发了加载");
  fatch.current = fatch.current + 1;
  loadData();
}
function clickTabs() {
  fatch.current = 1;
  finished.value = false;
  orders.records = [];
  loadData();
}
</script>
<style lang="scss" scoped></style>
